<template>
<div class="home">
  <header class="common-header">
    <!--<div class="left"></div>-->
    <h1 class="center">首页</h1>
    <!--<a class="right iconfont icon-search" href="#/search"></a>-->
  </header>
  <!--<swiper/>-->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in bannerList"><img :src="item.image" :alt="item.imageName" /></div>
    </div>
  </div>

  <!--小分类-->
  <div class="layout3-list">
    <div class="layout3-item" @click="go()" v-for="item in classList">
      <div class="imageBox">
        <div class="LazyLoad is-visible">
          <img class="image" :src="item.image" :alt="item.name" width="100%">
        </div>
      </div>
      <h3 class="name">{{item.name}}</h3>
    </div>
  </div>

  <!--精品推荐-->
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
    <div class="theme theme1" v-for="item in themeList">
      <div class="theme-header">
        <h3>{{item.title}}</h3>
        <router-link to="/">更多</router-link>
      </div>
      <div class="theme1-list">
        <div class="theme1-item" v-for="theme in item.gameList" @click="goDetail()">
          <div class="imageBox">
            <div class="LazyLoad is-visible">
              <img class="image" :src="theme.image" :alt="theme.name" width="100%">
            </div>
          </div>
          <h3 class="name">{{theme.name}}</h3>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>

  import Swiper from 'swiper'
  import axios from 'axios'

  export default {
    name: 'Home',
    components: {
      Swiper
    },
    data() {
      return {
        bannerList: [],
        classList: [],
        themeList: [],
        page: 1
      }
    },
    methods: {
      loadMore() {
        if(this.loading){
          return
        }
        axios.get('/app/mainpage/newgetmainpagelist?page='+this.page)
          .then((res) => {
            //console.log(res)
            if(res.data.data.themeList.length == 0){
              this.loading = true
            }
            if(this.loading){
              return
            }
            this.themeList = this.themeList.concat(res.data.data.themeList);
            this.page++

          })
      },
      goDetail:function(){
        this.$router.history.push("/detail/about");
      }
     
  },
  mounted() {
    axios.get('/app/mainpage/newgetmainpagelist?page=1')
      .then((res) => {
        //console.log(res)
        this.bannerList = res.data.data.bannerList;
        this.classList = res.data.data.classList;
        this.$nextTick(function() {
          var mySwiper = new Swiper('.swiper-container', {
            autoplay: true, //可选选项，自动滑动
            loop: true,
            autoplay: {
              delay: 3000,
              disableOnInteraction: false
            }
          })
        })
      })

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url('../assets/swiper.css');

.swiper-container {
  width: 100%;
}

.swiper-container img {
  width: 100%;
}

.common-header {
  height: 44px;
  line-height: 44px;
  background-color: #07b3ef;
  color: #fff;
}

.common-header .center {
  text-align: center;
  font-weight: 500;
}

.layout3-item,
.layout3-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.layout3-list {
  height: 0.58rem;
  background: #fff;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.layout3-item {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  overflow: hidden;
}

.layout3-item .imageBox {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 100%;
  margin-bottom: 0.03rem;
  overflow: hidden;
}

.LazyLoad {
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.layout3-item .imageBox .image {
  border-radius: 100%;
}

.layout3-item .name {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  width: 100%;
  color: #999;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme {
  margin-top: 0.11rem;
  font-size: 12px;
  background-color: #fff;
}

.theme-header {
  width: 100%;
  line-height: 0.36rem;
  display: flex;
  justify-content: space-between;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}

.theme1-list {
  height: 1rem;
  display: flex;
  overflow-x: scroll;
}

.theme1-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  width: 25%;
}

.theme1-item .imageBox {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.1rem;
  overflow: hidden;
}

.LazyLoad {
  transition: all 1s ease-in-out;
}
</style>
